<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header" style="font-size: 20px; font-weight: bold">
          <span>晚上好，{{ userStore.username }}</span>
        </div>
      </template>
      <div style="display: flex; flex-direction: row">
        <div>
          <el-avatar
            shape="circle"
            :size="100"
            src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
            fit="fill"
          />
        </div>
        <div style="margin-left: 20px; line-height: 2">
          <el-text size="large">
            欢迎使用Vue-Ele3-CMS<br />
            本后台管理项目名字为Vue-Ele3-CMS，参考`硅谷甄选`项目实现，项目采用了Vue3+Vite+Pinia+ElementPlus等实现！
          </el-text>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import useUserStore from "@/store/modules/user";
let userStore = useUserStore();
onMounted(() => {
  userStore.userInfo();
});
</script>
<script lang="ts">
export default {
  name: "Home",
};
</script>

<style scoped></style>
